import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { SearchBar, Grid, Tag,Tabs, Toast } from 'antd-mobile'
import './detail.less'
import kefu from '../../assets/img/kefu.png'
import shoper from '../../assets/img/shoper.png'
import buycart from '../../assets/img/buycart.png'
import { imgPre } from '../../request/http'
import { Link } from 'react-router-dom'
import {reqinfo,reqcartadd} from '../../request/api'
import {connect} from 'react-redux'
import { actions, getGInfo } from '../../store/mouble/detail'
import { bindActionCreators } from 'redux'
class Detail extends Component {
  constructor(){
    super()
   
    this.des=React.createRef()
  }
  componentDidMount(){
    let {detailFn:{requestGInfo},match:{params}}=this.props
    requestGInfo(params.id)
  }
  render() {
   console.log(this.props);
   let {info,detailFn:{addcart}}=this.props;

   if(info.description && this.des.current){
     this.des.current.innerHTML=info.description
   }
    return (
      <div>
        <Header title={info.goodsname} back></Header>
        <div className='detalnav'>
        
        <div className='detailshop'>
            <img src={imgPre+info.img} alt="" />
            <h3>商品名称:{info.goodsname}</h3>
             <p>价格：{info.price} <span>市场价:{info.market_price}</span></p>
             <div ref={this.des}></div>

        </div>
        </div>

        {/* 底部 */}
        <div className="footers">
        <Grid columns={7} gap={8}>
          <Grid.Item>
            <img src={kefu} alt="" />
          </Grid.Item>
          <Grid.Item>
            <img src={shoper} alt="" />
          </Grid.Item>
          <Grid.Item>
            <img src={buycart} alt="" />
          </Grid.Item>
          <Grid.Item span={2}>
               <span onClick={()=>{addcart()}}>加入购物车</span>
          </Grid.Item>
          <Grid.Item span={2}>
               <span className='buys'>立即购买</span>
          </Grid.Item>
         
        </Grid>
        </div>
      </div>
    )
  }
}
const mapStateToProps=state=>{return{
  info:getGInfo(state)
}}
const mapDispatchToProps=dispatch=>{return{
  detailFn:bindActionCreators(actions,dispatch)
}}
export default connect(mapStateToProps,mapDispatchToProps)(Detail)
